<template>
	<view style="display: flex;flex-direction: column;height: 100vh;">
		<view class="swiper" v-animate-on-scroll>
		  <u-swiper :list="list" :height="500"></u-swiper>
		</view>
		<view class="content">
			<view class="name">{{datalist.name || ''}}</view>
			<view class="adds">地址：{{datalist.address || ''}}</view>
			<view class="reat">
				<u-rate :count="count" v-model="datalist.rating" disabled :active-color="'#EA9518'" :size="25" :gutter="5" :inactive-color="'#C0C1C1'"></u-rate>
				<text style="margin-left: 3rpx;color: #EA9518;font-size: 24rpx;">{{datalist.rating || ''}}</text>
			</view>
			<view class="tags">
				<view class="tags_itme" v-for="(it, idex) in datalist.tags" :key="idex">
					{{it}}
				</view>
			</view>
		</view>
		<view class="tostore">
			<view class="title">到店预约</view>
			<view class="phone">地址：{{datalist.address || ''}}</view>
			<view class="phone">电话：{{datalist.phone || ''}}</view>
			<view class="phone" v-if="datalist.startTime">营业时间：{{datalist.startTime + '-' + datalist.endTime}} (节假日无休)</view>
			<view class="title" style="margin-top: 50rpx;">店铺介绍</view>
		    <view class="u-content">
		      <u-parse :html="datalist.description"></u-parse>
		    </view>
		</view>
	</view>
</template>

<script>
	import { merchantinfo } from '@/core/api/index.js'
	export default{
		data(){
			return{
				list:[],
				datalist:{},
				count:5
			}
		},
		onLoad(r) {
			console.log(r)
			this.Merchantinfo(r.id)
		},
		methods:{
		   async Merchantinfo(id){
			   const {data}  = await merchantinfo(id)
			   console.log(data)
			   if (data && data.carouselImages && Array.isArray(data.carouselImages)) {
			      data.carouselImages = data.carouselImages.map(url => {
			        // 确保每个URL都以https开头
			        if (url && !url.startsWith('http')) {
			          return 'https:' + url
			        }
			        return url
			      })
			    }
			   this.list = data.carouselImages
			   this.datalist = data
		   }
		}
	}
</script>
<style>
	page{
		background: #F8F8F8;
	}
	
</style>
<style lang="scss">
	.content{
		position: relative;
		padding: 30rpx 30rpx;
		background-color: #fff;
		.name{
			font-size: 32rpx;
		}
		.adds{
			color: #8C8C8C;
			margin: 10rpx 0;
		}
		.reat{
			position: absolute;
			right: 4%;
			top: 30rpx;
		}
		.tags{
			display: flex;
			width: 100%;
			margin-top: 20rpx;
			flex-wrap: wrap;
			.tags_itme{
				margin-bottom: 10rpx;
				padding: 3rpx 20rpx;
				border: 1rpx solid #A5A5A5;
				border-radius: 30rpx;
				margin-right: 10rpx;
				color: #ABABAB;
				max-width: 160rpx;
			  white-space: nowrap;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  display: inline-block;   /* 配合max-width生效 */
			}
		}
	}
	.tostore{
		background-color: #fff;
		flex: 1;
		width: 100%;
		margin-top: 30rpx;
		padding: 30rpx 30rpx;
		.title{
			font-size: 32rpx;
		}
		.phone{
			font-size: 26rpx;
			color: #8C8C8C;
			margin: 10rpx 0;
		}
		.u-content{
			margin-top: 10rpx;
			line-height: 43rpx;
			font-size: 26rpx;
			color: #8C8C8C;
		}
	}
</style>